<template>
	<view class="content">
		<nav-bar leftIcon="left"></nav-bar>
		<view class="from" v-if="dataList.userName">
			<h-input :name="$t('郵箱號')" :values="list.email" :disabled="dataList.email ? true : false" @myInp='handleEmail'
				v-if="!dataList.email">
			</h-input>
			<view class="text" v-if="dataList.email">
				<view>
					{{ $t('郵箱號') }}
				</view>
				<view style="color: aliceblue;font-size: 30rpx;margin-top: 30rpx;margin-left: 15rpx;">
					{{ list.email }}
				</view>

			</view>
			<h-input iptType="number" :name="$t('手機號')" :values="list.phone" :disabled="dataList.phone ? true : false"
				@myInp='handlePhone' v-if="!dataList.phone">
			</h-input>
			<view class="text" v-if="dataList.phone" style="margin-top: 35rpx;">
				<view>
					{{ $t('手機號') }}
				</view>
				<view style="color: aliceblue;font-size: 30rpx;margin-top: 30rpx;margin-left: 15rpx;">
					{{ list.phone }}
				</view>

			</view>
			<h-input :name="$t('驗證碼')" :values="list.verifyCode" @myInp='handleCode' :disabled="false"
				v-if="!dataList.email || !dataList.phone">
				<template v-slot:right>
					<view @click="debounceGetAuthCode" v-if="isGetCode" class="codeText">{{ $t('獲取驗證碼') }}
					</view>
					<view v-else class="codeText">{{ countDownNum }}</view>
				</template>
			</h-input>

			<h-input :name="$t('昵稱')" :values="list.userName" @myInp='handleUserName' :disabled="false">
			</h-input>
		</view>
		<view class="btn-sub" @click="onClick">
			{{ $t('保存') }}
		</view>
	</view>
</template>

<script setup>
import {
	onBeforeUpdate,
	onMounted,
	ref
} from "vue";
import HInput from '@/components/h-input.vue'
import {
	onLoad, onShow
} from "@dcloudio/uni-app"
const {
	getMyInviteFriends,
	getMyInfo,
	sendCode
} = getInviteFriends()
import getInviteFriends from '@/hooks/inviteFriends.js'
import i18n from '@/locale/index'
const dataList = ref({})
const inputDialog = ref()
let isGetCode = ref(true)
let countDownNum = ref(0) //倒计时数字
const cutNum = ref(true)
let email = ref('') //邮箱
const phone = ref('') //手机号
let authCode = ref('') //验证码
let emailDisabled = ref(false)
let phoneDisabled = ref(false)
const listShow = ref({})
const list = ref({
	userId: uni.getStorageSync('setUserInfo').userId,
	email: "",
	userName: "",
	phone: "",
	verifyCode: ""
})
const onClick = async () => {
	// if(list.value.email == '' || list.value.email == null){
	// 	uni.showToast({
	// 		title: `${i18n.global.t('請填寫郵箱')}`,
	// 		icon: 'none',
	// 	});
	// }else if(list.value.userName == ''|| list.value.userName == null){
	// 	uni.showToast({
	// 		title: `${i18n.global.t('請填寫昵稱')}`,
	// 		icon: 'none',
	// 	});
	// }else if(list.value.phone == '' || list.value.phone == null){
	// 	uni.showToast({
	// 		title: `${i18n.global.t('請填寫手機號')}`,
	// 		icon: 'none',
	// 	});		
	// }else{
	await getMyInfo('user/editInfo', list.value)
	uni.showToast({
		title: `${i18n.global.t('保存成功')}`,
		icon: 'none',
	});
	userInfo()

	// }
}
let a = true
const debounceGetAuthCode = async () => {
	// 在此处编写原始的getAuthCode方法的代码
	if (cutNum.value && list.value.email == '') {
		// 邮箱验证逻辑
		if (!list.value.email) {
			return uni.showToast({
				title: `${i18n.global.t('請填寫郵箱')}`,
				icon: 'none',
			});
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

		function endsWithEmail(str) {
			return emailRegex.test(str);
		}

		if (!endsWithEmail(list.value.email)) return ShowToast(`${i18n.global.t('請輸入正確的郵箱格式!')}`);
	} else {
		// 手机号验证逻辑
		if (!list.value.phone) {
			return uni.showToast({
				title: `${i18n.global.t('請填寫手機號')}`,
				icon: 'none',
			});
		}
	}
	if (a) {
		a = false
		isGetCode.value = false;
		countDownNum.value = 60;
		let timer = setInterval(() => {
			countDownNum.value--;
			if (countDownNum.value === 0) {
				clearInterval(timer);
				isGetCode.value = true;
			}
		}, 1000);		
		if (cutNum.value && dataList.value.phone != '') {
			setTimeout(() => {
				a = true
			}, 5000)
			const res = await sendCode('user/sendVerificationCode', {
				email: list.value.email,
				checksType: 3
			});
		} else {
			setTimeout(() => {
				a = true
			}, 5000)
			await sendCode('user/sendPhoneVerificationCode', {
				phone: list.value.phone,
				checksType: 3
			});
		}
		uni.showToast({
			title: `${i18n.global.t('發送成功')}`,
			icon: 'none',
		});
	}

};
onLoad(() => {
	userInfo()
})
const handlePhone = (e) => {
	list.value.phone = e
}
const handleUserName = (e) => {
	list.value.userName = e
}
const handleCode = (e) => {
	list.value.verifyCode = e
}
const handleEmail = (e) => {
	list.value.email = e
}
const handleShow = () => {
	inputDialog.value.open()
}
const userInfo = async () => {
	let alist = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let data = await getMyInfo('user/personalInfo', alist)
	// data.phone = ''
	list.value.userName = data.userName

	if (data.email == null) {
		data.email = ''
	} else {
		list.value.email = data.email
	}
	if (data.phone == null) {
		data.phone = ''
	} else {
		list.value.phone = data.phone
	}
	listShow.value = data
	if (data.email) {
		emailDisabled.value = true
	} else {
		phoneDisabled.value = true
	}
	dataList.value = data

}
</script>

<style scoped>
.text {
	font-size: 24rpx;
	color: #808492;
	line-height: 24rpx;
}

.codeText {
	width: 150rpx;
	height: 27rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #636897;
	line-height: 27rpx;
	text-align: right;
}

.content {
	margin: 0 55rpx;
}

.inpIcon {
	width: 30rpx;
	height: 22rpx;
}

.top-title {
	width: 100%;
	margin-top: 100rpx;

	.imgIcon {
		width: 210rpx;
		height: 140rpx;
	}

	.welcome {
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42rpx;
		margin-top: 27rpx;
	}

	.text {
		font-size: 24rpx;
		margin-top: 21rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 24rpx;
		background: linear-gradient(to right, #7B65FF 0%, #FF78A8 50%);
		background-color: #848686;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.from {
	width: 100%;
	/* padding-top: 20rpx; */
}

.goLogin {
	width: 100%;
	text-align: right;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 24rpx;
	margin: 30rpx 0;
}

.btn-sub {
	width: 640rpx;
	height: 90rpx;
	background: linear-gradient(90deg, #5641DD, #B1A6FD);
	background: linear-gradient(90deg, #039BDA, #0DF2ED);
	border-radius: 45rpx;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	margin-bottom: 30rpx;
	margin-top: 35rpx;
	position: absolute;
	bottom: 35rpx;
	left: 55rpx;
}</style>